<template>
    <div class="basic-wrapper">
        <div class="title">
            <span>基本信息</span>
            <el-icon
                color="#409eff"
                @click="edit"
                v-if="detailData && !detailData.enabled && checkPermi(['iot:device:edit'])"
                ><Edit />
            </el-icon>
        </div>
        <el-skeleton animated :loading="loading">
            <template #template>
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
            </template>
            <template #default>
                <el-descriptions v-if="detailData" :column="4" border>
                    <el-descriptions-item :span="3" label="设备名称">
                        {{ detailData.deviceName }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="标识符">
                        {{ detailData.id }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="3" label="产品">
                        <el-button link type="primary" @click="onGoPage">
                            {{ detailData.productInfo.productName }}
                        </el-button>
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="设备编号">
                        {{ detailData.deviceNo }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="设备全称">
                        {{ detailData.deviceFullName }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="设备简拼">
                        {{ detailData.deviceBriefName }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="连接方式">
                        <el-tag v-if="detailData.connectMethod">
                            {{ ConnectMethod[detailData.connectMethod] }}
                        </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="IP地址">
                        {{ detailData.networkIp || '--' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="端口号">
                        {{ detailData.networkPort || '--' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="串口号">
                        {{ detailData.serialPort || '--' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="串口波特率">
                        {{ detailData.baudRate || '--' }}
                    </el-descriptions-item>
                    <template v-if="detailData.productInfo.productType == 'CLOUD_GATEWAY'">
                        <el-descriptions-item :span="2" label="NB-IoT平台">
                            {{ detailData.nbIot || '--' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="NB-IoT串号">
                            {{ detailData.nbIotSerial || '--' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="NB-IoT注册">
                            {{ detailData.nbIotRegistration || '--' }}
                        </el-descriptions-item>
                    </template>
                    <el-descriptions-item label="创建人">
                        {{ detailData.creator }}
                    </el-descriptions-item>
                    <el-descriptions-item label="创建时间">
                        {{ detailData.createTime }}
                    </el-descriptions-item>
                    <el-descriptions-item label="启用时间">
                        {{ detailData.enabledTime }}
                    </el-descriptions-item>
                    <el-descriptions-item label="认证方式">
                        <span v-if="detailData.authType === 'Secret'" class="auth-type-box">
                            {{ showKey }}
                            <el-button link type="primary" @click="showHide"> {{ show ? '隐藏' : '显示' }} </el-button>
                            /
                            <el-button link type="primary" @click="download"> 下载 </el-button>
                        </span>
                        <el-tag v-else>
                            {{ AuthType[detailData.authType] }}
                        </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="注册时间">
                        {{ detailData.deviceStatusInfo.activeTime }}
                    </el-descriptions-item>
                    <el-descriptions-item label="最后连网时间">
                        {{ detailData.deviceStatusInfo.lastOnlineTime }}
                    </el-descriptions-item>
                    <el-descriptions-item label="状态变更前最后通信时间">
                        {{ detailData.deviceStatusInfo.lastNetworkTime }}
                    </el-descriptions-item>
                    <el-descriptions-item label="最近离线时间">
                        {{ detailData.deviceStatusInfo.offlineTime }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="4" label="描述">
                        <div class="value">{{ detailData.description }}</div>
                    </el-descriptions-item>
                </el-descriptions>
            </template>
        </el-skeleton>
    </div>
</template>
<script setup lang="ts">
import { AuthType, ConnectMethod, REQUEST_CODE_MESSAGE } from '@/utils/constant';
import { Edit } from '@element-plus/icons-vue';
import { showPopupBox } from '@great/utils';
import { checkPermi } from '@/utils/ruoyi';
import { useRouter } from 'vue-router';
import CreateEditModal from '../../../list/CreateEditModal.vue';

const router = useRouter();
const props = defineProps<{
    detailData?: Record<string, any>;
}>();
const initDetail = inject('initDetail');
const loading = ref(true);

const edit = () => {
    showPopupBox(CreateEditModal, {
        row: props.detailData as any,
        callBack: initDetail as () => Promise<void>
    });
};
const show = ref(true);
const showKey = ref('');
const onGoPage = () => {
    if (checkPermi(['iot:product:detail'])) {
        router.push({
            name: 'IoT-product-detail',
            params: {
                id: props.detailData?.productInfo.id
            }
        });
    }
};
// TODO：显隐切换
const showHide = () => {
    show.value = !show.value;
    if (show.value) {
        showKey.value = '123456';
    } else {
        showKey.value = '123***';
    }
};
// TODO：下载
const download = () => {
    //
};
watch(
    () => props.detailData,
    newValue => {
        if (newValue) loading.value = false;
        showHide();
    },
    { immediate: true }
);
</script>
<style scoped lang="scss">
.basic-wrapper {
    .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        > span {
            margin-right: 5px;
        }
        .el-icon {
            cursor: pointer;
        }
    }
    .el-descriptions {
        .label {
            display: flex;
            align-items: center;
            > span {
                margin-right: 3px;
            }
        }
        .value {
            height: 64px;
        }
        .auth-type-box {
            .el-button {
                margin: 0;
            }
        }
        .version-item-value {
            display: flex;
            justify-content: space-between;
        }
        .img-item-value {
            display: flex;
            align-items: center;
        }
    }
}
</style>
